<template>
  <a-menu
      theme="dark"
      mode="inline"
      :defaultOpenKeys="openKeys"
      :selectedKeys="selectedKeys"
      @click="menuClick"
  >
    <template v-for="(menu, index) in menuTree">
      <a-menu-item
          v-if="!menu.children || menu.children.length === 0"
          :key="menu.key"
      >
        <a-icon v-if="menu.icon" :type="menu.icon"/>
        <span>{{ menu.name }}</span>
      </a-menu-item>
      <custom-sub-menu v-else :subMenu="menu" :key="index"></custom-sub-menu>
    </template>
  </a-menu>
</template>

<script>
import MenuItem from "./MenuItem.vue";
import {MenuList} from '@/api/mock/MockMenuList.js';
import Recursion from '@/utils/Recursion.js'

export default {
  data() {
    return {
      selectedKeys: [],
    };
  },
  computed: {
    routePath() {
      return this.$route.path;
    },
    openKeys() {
      this.refreshSelectKeys();
      // 菜单层级为：1, 2, 3 则defaultOpenKeys = [1, 2]
      if (this.selectedKeys.length <= 1) {
        return [];
      }
      const result = this.selectedKeys.map(item => {
        return item;
      });
      result.splice(0, 1);
      return result.reverse();
    },
    menuTree() {
      return new Recursion(MenuList.map(item => {
        return {
          key: item.id,
          name: item.name,
          icon: item.icon,
          parentId: item.parentId
        }
      }), 'key', 'parentId').buildTree();
    },
    menuWithUrl() { // 返回有URL的菜单，方便点击时做跳转
      return MenuList
          .filter(item => {
            return item.url
          })
          .map(item => {
            return {key: item.id, url: item.url}
          });
    }
  },
  watch: {
    routePath: {
      handler() {
        this.refreshSelectKeys();
      }
    }
  },
  methods: {
    refreshSelectKeys() { // 刷新选中的菜单 - 高亮
      let routePath = this.routePath;
      if (routePath !== '/' && routePath.endsWith('/')) {
        routePath = routePath.substring(0, routePath.length - 1);
      }
      const target = this.menuWithUrl.filter(item => {
        return item.url === routePath
      });
      if (target && target.length !== 0) {
        this.setSelectedKeys(target[0].key);
      }
    },
    menuClick(menu) {
      const target = this.menuWithUrl.filter(item => {
        return item.key === menu.key
      });
      if (target && target.length !== 0) {
        this.$router.push({path: target[0].url});
      }
    },
    setSelectedKeys(key) {
      // 菜单层级为：1, 2, 3 则selectedKeys = [3, 2, 1]
      const result = [];
      this.recursionSelectedKeys(result, key);
      this.selectedKeys = result;
    },
    recursionSelectedKeys(list, key) {
      for (let i = 0; i < MenuList.length; i++) {
        const menu = MenuList[i];
        if (menu.id === key) {
          list.push(menu.id);
          if (menu.parentId) {
            this.recursionSelectedKeys(list, menu.parentId);
          }
        }
      }
    }
  },
  components: {
    "custom-sub-menu": MenuItem,
  }
};
</script>
<style>
</style>